<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <title>Document</title>
 <script src='../public/js/vue.js'></script>
</head>
<body>
  <div id='app'>
    <!-- 
      问题记录：
      因为vue 出于性能的考虑 在拿到 dom 时并不是直接将 dom 渲染，而是创建一个虚拟 dom
      然后将虚拟 dom 进行渲染，在该案例 input 切换时 vue 只是将其id 和 placeholder 
      属性进行修改，所有会出现 输入值，切换后input 框中值未清空
      如果需要清空 在input上添加key属性 作为唯一标识，注意当key 一致时 还是会有上述现象
    -->
    <span v-if="isShow">
      <label form="username">账号</label>
      <input type="text" id="username" placeholder="请输入账号" key="username">
    </span>
    <span v-else>
      <label form="email">邮箱</label>
      <input type="text" id="email" placeholder="请输入邮箱" key="email">
    </span>
    <button @click="isShow = !isShow">切换登录方式</button>
  </div>
  <script>
  const app = new Vue({
    el: '#app',
    data() {
      return {
        isShow:true
      }
    },
    methods:{
    },
    computed:{
      
    }
  })
  </script>
</body>
</html>